<template>

  <div>
    <div @click="btnMessagetoMainFn">
      <button @click="btnMessagetoMainFn">发送给主页面消息</button>
    </div>
    <!-- <a-config-provider :locale="locale" :get-popup-container="popContainer">
      <router-view v-if="isRouterAlive" />
      <div v-resize @resize="onResize">This divs with is: {{ width }}</div>

    </a-config-provider> -->
  </div>

</template>

<script>
import { enquireScreen } from './utils/util'
import { mapState, mapMutations } from 'vuex'
import themeUtil from '@/utils/themeUtil';
import { getI18nKey } from '@/utils/routerUtil'
export default {
  name: 'App',
  provide() {
    return {
      /**
       * 记录一下是否已经加载了当前的message监听
       */
      finishedFlag: false,
      reload: this.reload
    }
  },
  data() {
    return {
      width: 0,//当前的宽度
      locale: {},
      isRouterAlive: true
    }
  },
  created() {
    this.setHtmlTitle()
    this.setLanguage(this.lang)
    enquireScreen(isMobile => this.setDevice(isMobile))
  },
  mounted() {
    let that = this;
    this.setWeekModeTheme(this.weekMode)
    // TODO:解决两次调用message监听：store存储数据
    window.addEventListener('message', (e) => {
      that.setMessageFinishedFlag(true)
      if (!that.messageFinishedFlag) {
        console.log('main,我要实时接收消息了-来自iframe父级', e.data);
        console.log(e.data)
      }

    }, false)
  },
  watch: {
    weekMode(val) {
      this.setWeekModeTheme(val)
    },
    lang(val) {
      this.setLanguage(val)
      this.setHtmlTitle()
    },
    $route() {
      this.setHtmlTitle()
    },
    'theme.mode': function (val) {
      let closeMessage = this.$message.loading(`您选择了主题模式 ${val}, 正在切换...`)
      themeUtil.changeThemeColor(this.theme.color, val).then(closeMessage)
    },
    'theme.color': function (val) {
      let closeMessage = this.$message.loading(`您选择了主题色 ${val}, 正在切换...`)
      themeUtil.changeThemeColor(val, this.theme.mode).then(closeMessage)
    },
    'layout': function () {
      window.dispatchEvent(new Event('resize'))
    }
  },
  computed: {
    ...mapState('setting', ['layout', 'theme', 'weekMode', 'lang', 'messageFinishedFlag'])
  },
  methods: {
    ...mapMutations('setting', ['setDevice', 'setMessageFinishedFlag']),
    /**
     * iframeBtnFn下发消息内容
    */
    btnMessagetoMainFn() {
      console.log(this.messageFinishedFlag, 'methods方法-messageFinishedFlag');
      console.log('来自nuxt的框架我的消息', '消息发送了')
      window.postMessage('来自nuxt的框架我的消息', '*')
    },
    onResize(e) {
      console.log("resize event", e.detail.width, e.detail.height);
      this.width = e.detail.width;
    },

    reload() {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    },
    setWeekModeTheme(weekMode) {
      if (weekMode) {
        document.body.classList.add('week-mode')
      } else {
        document.body.classList.remove('week-mode')
      }
    },
    setLanguage(lang) {
      this.$i18n.locale = lang
      switch (lang) {
        case 'CN':
          this.locale = require('ant-design-vue/es/locale-provider/zh_CN').default
          break
        case 'HK':
          this.locale = require('ant-design-vue/es/locale-provider/zh_TW').default
          break
        case 'US':
        default:
          this.locale = require('ant-design-vue/es/locale-provider/en_US').default
          break
      }
    },
    setHtmlTitle() {
      const route = this.$route
      const key = route.path === '/' ? 'home.name' : getI18nKey(route.matched[route.matched.length - 1].path)
      document.title = process.env.VUE_APP_NAME + ' | ' + this.$t(key)
    },
    popContainer() {
      return document.getElementById("popContainer")
    }
  }
}
</script>

<style lang="less" scoped>
// 全局样式
.pageFull {
  perspective: 400px;
  width: 3680px;
  height: 1620px;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}



.outerFull {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

// 全局样式
.pageFull {
  perspective: 400px;
  width: 8000px;
  height: 620px;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
</style>
